<template>
  <div class="newsDetail">

    <!--    面包屑-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{path:'/topic?topic='+newsInfo.topic}">{{newsInfo.topic}}</el-breadcrumb-item>
      <el-breadcrumb-item>新闻详情</el-breadcrumb-item>

    </el-breadcrumb>

    <div class="news_title">
      {{newsInfo.title}}
    </div>
    <div class="news_info">
      <div class="author">作者:{{newsInfo.author}}</div>
      <div class="time">发布时间:{{newsInfo.date}}</div>
    </div>
    <div class="news_text">
      <p>{{newsInfo.content}}</p>
    </div>

    <!--    评论-->
    <Comment :singleNews="newsInfo"></Comment>
  </div>
</template>

<script>
  import Comment from "../components/Comment"

  export default {
    name: "NewsDetail",
    data() {
      return {
        newsInfo: {}
      }
    },
    methods: {
      getNews() {
        this.$store.dispatch('getSingleNews', this.$route.query.id)
          .then(() => {
            this.newsInfo = this.$store.state.singleNews
          })
      }
    },
    created() {
      this.getNews()
    },
    watch: {
      '$route.query.id': {
        handler: function () {
          this.getNews()
        }
      }
    },
    components: {
      Comment
    }
  }
</script>

<style scoped lang="less">
  .newsDetail {
    padding: 0 30px;
    border-right: 1px solid #ccc;

    .news_title {
      font-size: 20px;
      text-align: center;
      padding: 20px 0;
      border-bottom: 1px solid #eee;
    }

    .news_info {
      color: #676464;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px;

      .author {
      }

      .time {
      }
    }

    .news_text {
      p {
        color: #000;
        font-size: 16px;
        letter-spacing: 2px;
        line-height: 20px;
        text-indent: 2em;
      }
    }
  }
</style>